<template>
  <div class="newsSetting">
    <u-nav-bar :title="'消息设置'"></u-nav-bar>
    <div class="newsSetting__ct">
      <div class="newsSetting__ct__item" v-for="item in dataList" :key="item.id" @click="HandelClear(item)">
        <!-- <div class="newsSetting__ct__item__icon" :class="`newsSetting__ct__item__icon${item.id}`">
          <img :src="item.img" />
        </div> -->
        <div class="newsSetting__ct__item__msg">
          <div class="top">
            <div class="title">
              <div>{{ item.title }}</div>
            </div>
          </div>
          <div class="bt">
            <div class="memo">{{ item.memo }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import store from '@/store/index'
import { Dialog, Toast } from 'vant'
import uNavBar from '@/components/NavBar.vue'
import systemImg from '@/assets/image/newsCenter/system.png'
import wayOrderImg from '@/assets/image/newsCenter/wayOrder.png'
import activityImg from '@/assets/image/newsCenter/activity.png'

type NoticeItem = {
  id: number
  title: string
  memo: string
  type: number
  img: string
}

export default defineComponent({
  name: 'newsSettingSystem',
  components: { 'u-nav-bar': uNavBar, [Dialog.Component.name]: Dialog.Component },

  // 只注重主流程的执行，不同业务的函数拆分出去，业务逻辑清晰明了
  setup() {
    const dataList: NoticeItem[] = [
      {
        id: 1,
        title: '清空系统消息',
        memo: '默认30天自动清空',
        type: 1,
        img: systemImg
      },
      {
        id: 2,
        title: '清空活动消息',
        memo: '默认30天自动清空',
        type: 4,
        img: wayOrderImg
      },
      {
        id: 3,
        title: '清空运单消息',
        memo: '清空之后将丢失多有运单凭证，请慎重',
        type: 2,
        img: activityImg
      }
    ]

    const userInfo = store.getters['user/getUserInfo']

    /** 事件区域 */
    const HandelClear = async (item: NoticeItem): Promise<void> => {
      const msg: { name: string; memo: string }[] = [
        {
          name: '清空系统消息',
          memo: '确认清空系统消息吗？'
        },
        {
          name: '清空活动消息',
          memo: '确认清空活动消息吗？'
        },
        {
          name: '清空运单消息',
          memo: '确认清空运单消息吗？清空之后将丢失运单凭证，您确定吗？'
        }
      ]
      const beforeClose = async (action: any): Promise<any> => {
        if (action === 'confirm') {
          const result = await store.dispatch('newsCenter/handleSysNoticeReadingByType', {
            type: item.type,
            userId: userInfo.id,
            noticeType: item.type
          })
          if (result) {
            Toast.success('清除成功')
          }
          return true
        } else {
          // 拦截取消操作
          Dialog.close()
          return false
        }
      }
      Dialog.confirm({
        title: msg[item.id - 1].name,
        message: msg[item.id - 1].memo,
        beforeClose
      })
    }

    return {
      dataList,
      HandelClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
.newsSetting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: $background-color-base;
  &__ct {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    &__item {
      margin-bottom: 10px;
      width: 100%;
      padding: 13px 10px;
      box-sizing: border-box;
      background-color: white;
      box-shadow: 0px 6px 14px 0px rgba(221, 221, 221, 0.15);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: unset;
      position: relative;
      &__icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        position: relative;
        img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      &__icon1 {
        background: linear-gradient(124deg, #74cdff 0%, #409eff 100%);
        box-shadow: 0px 2px 10px 0px rgba(0, 119, 195, 0.36);
      }
      &__icon2 {
        background: linear-gradient(124deg, #ffd67a 0%, #ffc201 100%);
        box-shadow: 0px 2px 10px 0px rgba(255, 202, 44, 0.34);
      }
      &__icon3 {
        background: linear-gradient(124deg, #ff88bb 0%, #fd5861 100%);
        box-shadow: 0px 2px 10px 0px rgba(246, 87, 113, 0.34);
      }

      &__msg {
        width: calc(100% - 52px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 32px;
        > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .top {
          .title {
            font-size: 12px;
            color: #333333;
            font-weight: bold;
            display: flex;
            align-items: center;
          }
          .time {
            padding-left: 10px;
            font-size: 11px;
            font-weight: 400;
          }
        }
        .bt {
          overflow: hidden;
          .memo {
            font-size: 12px;
            color: $color-text-secondary;
          }
        }
      }
    }
  }
}
</style>
